<template>
  <section>
    <!--工具条-->
    <el-row>
      <!--类型列表-->
      <el-col :span="12">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="typeFilters">
            <el-form-item>
              <el-input v-model="typeFilters.keyword" placeholder="关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-on:click="typeSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="typeHandleAdd">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!--列表-->
        <el-table @row-click="click" :data="dictionaryTypes" highlight-current-row v-loading="listLoading" @selection-change="typeSelsChange"
                  style="width: 100%;">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="100" sortable>
          </el-table-column>
          <el-table-column prop="sn" label="描述" width="160" sortable>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="160">
            <template scope="scope">
              <el-button size="small" @click="typeHandleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="typeHandleDel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-button type="danger" @click="typeBatchRemove" :disabled="this.typeSels.length===0">批量删除</el-button>
          <el-pagination layout="prev, pager, next, sizes" background
                         @size-change="typeHandleSizeChange"
                         @current-change="typeHandleCurrentChange"
                         :page-size="typePageSize"
                         :page-sizes="pageSizes"
                         :total="total"
                         :current-page="typeCurrentPage"
                         style="float:right;">
          </el-pagination>
        </el-col>

        <!--新增/修改界面-->
        <el-dialog :title="title" :visible.sync="typeSaveFormVisible" :close-on-click-modal="false">
          <el-form :model="typeSaveForm" label-width="80px" :rules="saveFormRules" ref="typeSaveForm">
            <el-form-item label="产品类型">
              <el-input v-model="typeSaveForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品描述">
              <el-input v-model="typeSaveForm.sn" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="typeSaveFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="typeSaveSubmit" :loading="saveLoading">提交</el-button>
          </div>
        </el-dialog>
        <!--工具条-->
      </el-col>

      <!--字典明细列表-->
      <el-col :span="12">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="detailFilters">
            <el-form-item>
              <el-input v-model="detailFilters.keyword" placeholder="关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-on:click="detailSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="detailHandleAdd">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="dictionaryDetails" highlight-current-row v-loading="listLoading" @selection-change="detailSelsChange"
                  style="width: 100%;">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="100" sortable>
          </el-table-column>
          <el-table-column prop="dictionaryType.name" label="分类" width="100" sortable>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="160">
            <template scope="scope">
              <el-button size="small" @click="detailHandleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="detailHandleDel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-button type="danger" @click="detailBatchRemove" :disabled="this.detailSels.length===0">批量删除</el-button>
          <el-pagination layout="prev, pager, next, sizes" background
                         @size-change="detailHandleSizeChange"
                         @current-change="detailHandleCurrentChange"
                         :page-size="detailPageSize"
                         :page-sizes="pageSizes"
                         :total="total"
                         :current-page="detailCurrentPage"
                         style="float:right;">
          </el-pagination>
        </el-col>

        <!--新增/修改界面-->
        <el-dialog :title="title" :visible.sync="detailSaveFormVisible" :close-on-click-modal="false">
          <el-form :model="detailSaveForm" label-width="80px" :rules="saveFormRules" ref="detailSaveForm">
            <el-form-item label="分类明细" prop="username">
              <el-input v-model="detailSaveForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="detailSaveForm.dictionaryType" value-key="id" clearable placeholder="请选择">
                <!--
                  key:唯一标识
                  label:选中之后展示到选择框中的值
                  value:选中之后绑定给模型层的值
                -->
                <el-option
                    v-for="item in dictionaryTypes4Detail"
                    :key="item.id"
                    :label="item.name"
                    :value="item">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.sn }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="detailSaveFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="detailSaveSubmit" :loading="saveLoading">提交</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      title: "",
      typeFilters: {
        keyword: ''
      },
      detailFilters: {
        keyword: ''
      },
      dictionaryDetails: [],
      dictionaryTypes: [],
      dictionaryTypes4Detail: [],
      total: 0,
      typeCurrentPage: 1,
      detailCurrentPage: 1,
      typePageSize: 10,
      detailPageSize: 10,
      pageSizes: [5, 10, 15, 20],
      listLoading: false,
      detailSels: [],//列表选中行
      typeSels: [],
      typeSaveFormVisible: false,
      detailSaveFormVisible: false,//新增界面是否显示
      saveLoading: false,
      saveFormRules: {
        name: [
          {required: true, message: '请输入分类明细', trigger: 'blur'}
        ]
      },
      //新增界面数据
      detailSaveForm: {
        name: '',
        id: null,
        dictionaryType: {}
      },
      typeSaveForm: {
        name:'',
        sn:'',
        id:null,
      }

    }
  },
  methods: {
    // 行点击的时候查询到的数据
    listData(){
      this.$http.post("/dictionaryDetail/queryByTypeId",this.typeSaveForm)
        .then(result => {
          console.log(result)
          this.dictionaryDetails = result.data
        })
        .catch(result => {

        })
    },
    // 行点击事件
    click(row,event,column){
      this.typeSaveForm = Object.assign({}, row);
      this.listData();
    },
    detailHandleSizeChange(val) {
      this.detailPageSize = val;
      this.getDictionaryDetails();
    },
    typeHandleSizeChange(val){
      this.typePageSize = val;
      this.getDictionaryTypes();
    },
    detailSearch() {
      this.detailCurrentPage = 1;
      this.getDictionaryDetails();
    },
    typeSearch(){
      this.typeCurrentPage = 1;
      this.getDictionaryTypes();
    },
    detailHandleCurrentChange(val) {
      this.detailCurrentPage = val;
      this.getDictionaryDetails();
    },
    typeHandleCurrentChange(val) {
      this.typeCurrentPage = val;
      this.getDictionaryTypes();
    },
    //获取员工列表
    getDictionaryDetails() {
      let para = {
        currentPage: this.detailCurrentPage,
        pageSize: this.detailPageSize,
        keyword: this.detailFilters.keyword
      };
      this.listLoading = true;
      this.$http.post("/dictionaryDetail/page", para)
          .then(result => {
            console.log(result)
            this.listLoading = false;
            result = result.data;
            this.dictionaryDetails = result.rows;
            this.total = result.total;
          })
          .catch(result => {
            console.log(result);
            this.$message({
              type: 'error',
              message: '系统错误,我们正在殴打程序员'
            })
          })
    },
    getDictionaryTypes4Details() {
      // 发送Ajax请求获取数据
      this.$http.get("/dictionaryType/list")
          .then(result => {
            this.dictionaryTypes4Detail = result.data;
          })
    },
    getDictionaryTypes() {
      let para = {
        currentPage: this.typeCurrentPage,
        pageSize: this.typePageSize,
        keyword: this.typeFilters.keyword
      };
      this.listLoading = true;
      this.$http.post("/dictionaryType/page",para)
          .then(result=>{
            console.log(result)
            this.listLoading = false;
            result = result.data;
            this.dictionaryTypes = result.rows;
            this.total = result.total;
          })
          .catch(result=>{
            console.log(result);
            this.$message({
              type: 'error',
              message: '系统错误,我们正在殴打程序员'
            })
          })
    },
    //删除
    detailHandleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/dictionaryDetail/" + row.id)
            .then(result => {
              this.listLoading = false;
              result = result.data;
              if (result.success) {
                // 删除成功
                this.$message({
                  message: result.message,
                  type: 'success'
                });
                this.detailCurrentPage = 1;
                this.getDictionaryDetails();
              } else {
                // 删除失败
                this.$message({
                  message: result.message,
                  type: 'error'
                });
                this.detailCurrentPage = 1;
                this.getDictionaryDetails();
              }
            })
            .catch(result => {
              this.listLoading = false;
              this.$message({
                type: 'error',
                message: '系统错误,我们正在殴打程序员'
              });
            })
      }).catch(() => {

      });
    },
    typeHandleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/dictionaryType/"+row.id)
            .then(result=>{
              this.listLoading = false;
              result = result.data;
              if (result.success){
                // 删除成功
                this.$message({
                  message: result.message,
                  type: 'success'
                });
                this.typeCurrentPage = 1;
                this.getDictionaryTypes();
              } else {
                // 删除失败
                this.$message({
                  message: result.message,
                  type: 'error'
                });
                this.typeCurrentPage = 1;
                this.getDictionaryTypes();
              }
            })
            .catch(result=>{
              this.listLoading = false;
              this.$message({
                type: 'error',
                message: '系统错误,我们正在殴打程序员'
              });
            })
      }).catch(() => {

      });
    },
    //显示编辑界面
    detailHandleEdit: function (index, row) {
      this.getDictionaryTypes4Details();
      this.title = "编辑";
      this.detailSaveFormVisible = true;
      this.detailSaveForm = Object.assign({}, row);
    },
    typeHandleEdit: function (index, row) {
      this.title = "编辑";
      this.typeSaveFormVisible = true;
      this.typeSaveForm = Object.assign({}, row);
    },
    //显示新增界面
    detailHandleAdd: function () {
      this.getDictionaryTypes4Details();
      this.title = "新增";
      this.detailSaveFormVisible = true;
      this.detailSaveForm = {
        name: '',
        id: null,
        dictionaryType: {}
      };
    },
    typeHandleAdd: function () {
      this.title = "新增";
      this.typeSaveFormVisible = true;
      this.typeSaveForm = {
        name:'',
        sn:'',
        id:null,
      };
    },
    //新增
    detailSaveSubmit: function () {
      this.$refs.detailSaveForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {})
              .then(() => {
                this.saveLoading = true; // 开启按钮忙等
                let para = Object.assign({}, this.detailSaveForm); // 克隆表单数据
                // 处理后端需要的数据格式
                this.$http.post("/dictionaryDetail/save", para)
                    .then(result => {
                      this.saveLoading = false;
                      result = result.data;
                      if (result.success) {
                        // 新增成功
                        this.$message({
                          message: result.message,
                          type: 'success'
                        });
                        this.detailCurrentPage = 1;
                        this.getDictionaryDetails();
                        this.$refs['detailSaveForm'].resetFields(); // 重置表单校验
                        this.detailSaveFormVisible = false;
                      } else {
                        // 新增失败
                        this.$message({
                          message: result.message,
                          type: 'error'
                        });
                        this.detailCurrentPage = 1;
                        this.getDictionaryDetails();
                      }
                    })
                    .catch(result => {
                      this.saveLoading = false;
                      this.$message({
                        type: 'error',
                        message: '系统错误,我们正在殴打程序员'
                      });
                    })
              });
        }
      });
    },
    typeSaveSubmit: function () {
      this.$refs.typeSaveForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {})
              .then(() => {
                this.saveLoading = true; // 开启按钮忙等
                let para = Object.assign({}, this.typeSaveForm); // 克隆表单数据
                // 处理后端需要的数据格式
                this.$http.post("/dictionaryType/save",para)
                    .then(result=>{
                      this.saveLoading = false;
                      result = result.data;
                      if (result.success){
                        // 新增成功
                        this.$message({
                          message: result.message,
                          type: 'success'
                        });
                        this.typeCurrentPage = 1;
                        this.getDictionaryTypes();
                        this.$refs['typeSaveForm'].resetFields(); // 重置表单校验
                        this.typeSaveFormVisible = false;
                      } else {
                        // 新增失败
                        this.$message({
                          message: result.message,
                          type: 'error'
                        });
                        this.typeCurrentPage = 1;
                        this.getDictionaryTypes();
                      }
                    })
                    .catch(result=>{
                      this.saveLoading = false;
                      this.$message({
                        type: 'error',
                        message: '系统错误,我们正在殴打程序员'
                      });
                    })
              });
        }
      });
    },
    detailSelsChange: function (sels) {
      this.detailSels = sels;
    },
    typeSelsChange: function (sels) {
      this.typeSels = sels;
    },
    //批量删除
    detailBatchRemove: function () {
      var ids = this.detailSels.map(item => item.id)//.toString();
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        // 发送Ajax请求删除数据
        this.$http.patch("/dictionaryDetail", ids)
            .then(result => {
              this.listLoading = false;
              result = result.data;
              if (result.success) {
                // 删除成功
                this.$message({
                  message: result.message,
                  type: 'success'
                });
                this.detailCurrentPage = 1;
                this.getDictionaryDetails();
              } else {
                // 删除失败
                this.$message({
                  message: result.message,
                  type: 'error'
                });
                this.detailCurrentPage = 1;
                this.getDictionaryDetails();
              }
            })
            .catch(result => {
              this.listLoading = false;
              this.$message({
                type: 'error',
                message: '系统错误,我们正在殴打程序员'
              });
            })
      }).catch(() => {

      });
    },
    typeBatchRemove: function () {
      var ids = this.typeSels.map(item => item.id)//.toString();
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        // 发送Ajax请求删除数据
        this.$http.patch("/dictionaryType",ids)
            .then(result=>{
              this.listLoading = false;
              result = result.data;
              if (result.success){
                // 删除成功
                this.$message({
                  message: result.message,
                  type: 'success'
                });
                this.typeCurrentPage = 1;
                this.getDictionaryTypes();
              } else {
                // 删除失败
                this.$message({
                  message: result.message,
                  type: 'error'
                });
                this.typeCurrentPage = 1;
                this.getDictionaryTypes();
              }
            })
            .catch(result=>{
              this.listLoading = false;
              this.$message({
                type: 'error',
                message: '系统错误,我们正在殴打程序员'
              });
            })
      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getDictionaryDetails();
    this.getDictionaryTypes();
    this.getDictionaryTypes4Details();
  }
}

</script>

<style scoped>

</style>